<template>
	<view class="home">
		<view class="topNav">
			<u-tabs :list="listTopNav" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" @click="clickTopNav"></u-tabs>
		</view>
		
		<view class="loadingState" v-show="bShowSkeleton">
			<u-skeleton rows="5" title loading></u-skeleton>
		</view>

		<view class="content">
			<view class="item" v-for="item in dataList">
				<blog-item @delEvent="P_delEvent" :item="item" :isLike.sync="item.isLike"
					:like_count.sync="item.like_count"></blog-item>
			</view>
		</view>

		<view class="edit" @click="goEdit">
			<text class="iconfont icon-a-21-xiugai"></text>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				title: 'Hello',
				listTopNav: [{
						name: "最新",
						type: "publish_date"
					},
					{
						name: "热门",
						type: "view_count"
					}
				],
				dataList: [],
				navAction:0,
				bShowSkeleton: true
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			//跳转至编辑页面
			goEdit() {
				uni.navigateTo({
					url: "/pages/edit/edit"
				})
			},
			//获取网络列表
			async getData() {
				let artTemp = db.collection("articles").field(
					"title,user_id,description,picurls,comment_count,like_count,view_count,publish_date").getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
				db.collection(artTemp, userTemp).orderBy(this.listTopNav[this.navAction].type, "desc").get()
					.then(async res => {
						this.dataList = res.result.data
						this.bShowSkeleton = false
					})
			},
			clickTopNav(e) {
				this.bShowSkeleton = true;
				this.dataList = [];
				this.uniLoad = "more"
				this.navAction = e.index;
				this.noMore = false
				this.getData();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.content {
			.item {
				padding: 30rpx;
				border-bottom: #F7F7F7 15rpx solid
			}
		}

		.loadingState {
			padding-left: 30rpx;
		}

		.edit {
			width: 120rpx;
			height: 120rpx;
			background: #0199FE;
			border-radius: 50%;
			color: #fff;
			position: fixed;
			z-index: 100;
			bottom: 150rpx;
			right: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);

			.iconfont {
				font-size: 50rpx;
			}
		}
	}
</style>